<template>
  <div class="box-card">
    <el-card>
      <div slot="header">
        <span>新增产品 {{type==1?'单个':'详情'}} 图片</span>
      </div>
      <div>
        <el-upload class="upload-demo" action="http://122.112.175.16:1234/tmall_springboot/productImages" :limit="1"
          :before-upload="handleBeforeUpload" ref="upload" :file-list="fileList" v-model="fileList" :data="{type:type1,pid:pid}"
          :auto-upload="false" :on-success="handleSuccess" name="image">
          <el-button size="small" type="primary" plain>点击上传</el-button>
        </el-upload>
        <br><br>
        <el-button type="success" @click="commit()">提交</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
  import {
    addProductImage
  } from '@/api/admin/product_image.js'
  export default {
    data() {
      return {
        fileList: [],
		pid:this.$route.query.productId,
		type1:this.type == 1 ? 'single' : 'detail'
      }
    },
    props: {
      type: {
        type: String
      },
    },
    methods: {
      handleBeforeUpload(file) {
        // console.log(1)
        // this.fileList = []
        // this.fileList.push(file)
        // // return false
      },
      commit() {
        this.$refs.upload.submit()
      },
      uploadFile(e) {
        let formData = new FormData()
        formData.append('type', this.type == 1 ? 'single' : 'detail')
        formData.append('pid', this.$route.query.productId)
        formData.append('image', e.file)
        addProductImage(formData).then(response => {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.dialogVisible = false
          this.$emit('flash', this.type)
          this.$refs.form.resetFields()

          this.$refs.upload.clearFiles()
          this.fileList = []
        })
      },
      handleSuccess() {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.dialogVisible = false
          this.$emit('flash', this.type)
          this.$refs.form.resetFields()

          this.$refs.upload.clearFiles()
          this.fileList = []
      }
    },
  }
</script>

<style scoped>
  .box-card {
    width: 70%;
    margin: 20px auto;
  }

  .box-card>div>div:first-child>div {
    text-align: center;
  }
</style>
